import {LogoWechatStrokeFilledIcon} from "tdesign-icons-react";
import {Button, Divider} from "tdesign-react";
import Locker from "../assets/locker.svg";
import {useNavigate} from "react-router";
import {useEffect, useState} from 'react'
import {reqQrUrl} from "../api/auth.ts";

export default function QRLogin() {
  const navigate = useNavigate();
  const [qrUrl, setQrUrl] = useState('')

  const getQrCode = (url) => {
    const query = new URLSearchParams(url)
    const appid = query.get('appid')
    const scope = query.get('scope')
    const state = query.get('state')
    const redirect_uri = query.get('redirect_uri')

    // @ts-ignore
    new window.WxLogin({
      self_redirect: true,
      id: "qr",
      appid,
      scope,
      redirect_uri,
      state,
      style: "width: 116px",
      href: "",
      onReady: function (isReady) {
        console.log(isReady);
      },
      stylelite: 1,
    });
  }

  useEffect(() => {
    console.log('11')
    reqQrUrl(encodeURIComponent('http://zhida-front.natapp1.cc/login')).then(data => {
      getQrCode(data)
    })


  }, [])

  return (
    <>
      <div className="flex flex-col items-center justify-center">
        <div className="h-[150px]">
          {/*<QRCode value={qrUrl} size={116}/>*/}
          <div id="qr"></div>
        </div>
        <div className="text-sm my-4"><LogoWechatStrokeFilledIcon size={16} color="#28C445" className="mr-2"/>
          请使用微信扫码登录
        </div>
        <p className="text-gray-400 t ext-sm mt-1">微信扫码登录更安全、便捷、无需记住账号密码</p>

        <div className="w-[320px]">
          <Divider align="center" layout="horizontal">
            <span className="text-xs text-gray-400">其他登录方式</span>
          </Divider>
          <Button className="w-full rounded-2xl" size="large" variant="outline" onClick={() => navigate("/account")}>
            <img className="w-4 mr-2" src={Locker} alt="login"/>账号密码登录
          </Button>
          <div className="text-sm w-full text-center mt-4 text-gray-400">登录即表示您同意我们的
            <a className="text-blue-500 mx-1" href="#">服务条款</a>和
            <a className="text-blue-500 mx-1" href="#">隐私政策</a>
          </div>
        </div>
      </div>
    </>
  )
}
